<template>
	<view class="personal">
		<!-- bar -->
		<view class="personal__header">

			<view class="personal__title">我的</view>
			<view class="flex align-center mt-20" @click="handleUserInfo">
				<u-avatar :size="120" :src="avatar" bg-color="#FFFFFF" class="mr-20" shape="circle">
				</u-avatar>
				<view class="personal__user--box flex align-center justify-between flex-1">
					<view>
						<text class="personal__user--name">{{agentInfo.phone}}</text>
						<text class="personal__user--job">{{agentInfo.nickname}}</text>
					</view>
					<u-icon name="arrow-right" size="40"></u-icon>
				</view>
			</view>
			<view class="personal__box">
				<view class="flex align-center personal__money--box">
					<image src="/static/image/personal/img_my_icon_1.png" mode="" class="personal__tip-icon">
					</image>
					<view class=" flex align-center justify-between flex-1">
						<view>
							<view class="">{{userInfo.totalIncome}}</view>
							<view class="u-font-11">历史累计收益(元)</view>
						</view>

					</view>
				</view>
				<view class="flex align-center personal__withdraw--box">
					<image src="/static/image/personal/img_my_icon_2.png" mode="" class="personal__tip-icon">
					</image>
					<view class=" flex align-center justify-between flex-1">
						<view>
							<view class="">{{userInfo.withdrawalAmount}}</view>
							<view class="u-font-11">历史累计提现金额(元)</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<u-cell-group class="mt-20 group">
			<u-cell-item @click="goAccountBalance()" :title-style="{ color: '#333333' }" title="我的钱包" bg-color="white">
				<image :title-style="{ color: '#333333' }" class="icon mr-20" slot="icon"
					src="@/static/image/personal/icon_my_0.png" />
			</u-cell-item>
			<u-cell-item @click="goBenefit()" :title-style="{ color: '#333333' }" title="我的业绩" bg-color="white">
				<image class="icon mr-20" slot="icon" src="@/static/image/personal/icon_my_1.png" />
			</u-cell-item>
			<u-cell-item :title-style="{ color: '#333333' }" title="结算信息" @click="goSettlement()" bg-color="white">
				<image class="icon mr-20" slot="icon" src="@/static/image/personal/icon_my_2.png" />
			</u-cell-item>
			<u-cell-item @click="goAbout()" :title-style="{ color: '#333333' }" title="关于我们" bg-color="white">
				<image class="icon mr-20" slot="icon" src="@/static/image/personal/icon_my_3.png" />
			</u-cell-item>
			<u-cell-item :title-style="{ color: '#333333' }" title="设置" @click="handleSetting" bg-color="white">
				<image class="icon mr-20" slot="icon" src="@/static/image/personal/icon_my_4.png" />
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agentInfo: {},
				userInfo: {},
			};
		},
		created() {},
		onShow() {

			this.getUserInfo();
			this.agentInfo = uni.getStorageSync("user_info");
			console.log("agentInfo=" + JSON.stringify(this.agentInfo))

		},
		computed: {
			avatar() {
				if (this.agentInfo && !this.agentInfo.avatar) {
					return "";
				}
				if (
					this.agentInfo &&
					this.agentInfo.avatar &&
					this.agentInfov.avatar.indexOf("http") !== -1
				) {
					return this.agentInfo.avatar;
				}

				if (this.agentInfo && this.agentInfo.avatar) {
					return uni.$zx.downloadBaseUrl + this.agentInfo.avatar;
				}
			},

		},
		onTabItemTap({
			index,
			pagePath,
			text
		}) {
			// 点击tabs进来
			uni.removeStorageSync("newsCompass");
			uni.removeStorageSync("order_deliver");
		},
		methods: {
			getUserInfo() {
				this.$zx.user_api.accountStatistics().then((data) => {
					this.userInfo = data;
				});
			},


			handleSetting() {
				uni.navigateTo({
					url: "/packageD/pages/setting/setting",
				});
			},

			handleUserInfo() {
				uni.navigateTo({
					url: "/packageD/pages/user-info/user-info",
				});
			},
			goAccountBalance() {
				uni.navigateTo({
					url: "/packageD/pages/mine/balance/accountBalance",
				});
			},
			handleMessage() {
				uni.navigateTo({
					url: "/packageD/pages/mine/balance/accountBalance",
				});
			},
			goBenefit() {
				uni.switchTab({
					url: "/pages/benefit/benefit-home",
				});
			},
			goSettlement() {
				uni.navigateTo({
					url: "/packageD/pages/mine/settlement/settlementInfo",
				});
			},
			goAbout() {
				uni.navigateTo({
					url: "/packageD/pages/mine/about",
				});
			},

		},
	};
</script>
<style scoped lang="scss">
	.personal {
		&__title {
			font-size: 18px;
			line-height: 80rpx;
			height: 80rpx;
			font-weight: 500;
		}

		&__header {
			width: 750rpx;
			// height: 346rpx;
			position: relative;
			padding: 0 20rpx 20rpx 20rpx;
			padding-top: 68rpx;
			background-color: white;
		}

		&__background {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			left: 0;
			top: 0;
		}

		&__user--box {
			position: relative;
			// color: #ffffff;
			z-index: 1;
		}

		&__user--name {
			font-size: 36rpx;
			line-height: 62rpx;
			font-weight: bold;
			display: block;
		}

		&__user--job {
			font-size: 28rpx;
			line-height: 48rpx;
			font-weight: 400;
			display: block;
			margin-top: 10rpx;
		}

		&__box {
			display: flex;
			justify-content: space-around;
			padding: 10rpx;
			font-size: 11px;
			color: white;

		}

		&__money--box {
			background-repeat: no-repeat;
			// height: 167rpx;
			height: 132rpx;
			background-size: 100% 100%;
			background-image: url("http://118.31.238.190/home/img_my_bg_1.png");
			margin-right: 10rpx;
			padding-left: 20rpx;
			flex: 1;
		}

		&__withdraw--box {
			background-repeat: no-repeat;
			// height: 167rpx;
			height: 132rpx;
			background-size: 100% 100%;
			background-image: url("http://118.31.238.190/home/img_my_bg_2.png");
			margin-left: 10rpx;
			padding-left: 20rpx;
			flex: 1;
		}

		&__tip-icon {
			width: 70rpx;
			height: 70rpx;
			margin-right: 10rpx;
		}
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.group {
		background-color: white;
	}
</style>